import { init } from 'snabbdom/build/package/init'
import { h } from 'snabbdom/build/package/h'
import { propsModule } from 'snabbdom/build/package/modules/props.js'
import { eventListenersModule } from 'snabbdom/build/package/modules/eventlisteners.js'
import { requestData } from './mock/list'

let oldVNode = document.getElementById('app'); // 存储当前旧的VNode
const wordList = [...Array(26).keys()].map(i => String.fromCharCode(i + 65)) // 创建A-Z的数组，用于标题或者描述的排序
const patch = init([
  eventListenersModule,
  propsModule
])

let listData = [
  ...requestData
]

/**
 * 页面渲染
 * @author chaiyf
 * @date 2021-01-16 16:01
 */
function render () {
  oldVNode = patch(oldVNode, pageVNode(listData))
}

/**
 * 排序
 * @author chaiyf
 * @date 2021-01-16 11:33
 * @param {string} sort rank: 按照rank排序 title: 按照title排序 description: 按照描述排序
 */
function sortList (sortType) {
  return function () {
    switch (sortType) {
      case 'rank':
        listData.sort((a, b) => {
          return a[sortType] < b[sortType] ? -1 : (a[sortType] === b[sortType] ? 0 : 1)
        })
        break;

      default:
        listData.sort((a, b) => {
          console.log(a[sortType])
          console.log(b[sortType])
          const aSortTypeFirstLetter = a[sortType][0].toUpperCase()
          const bSortTypeFirstLetter = b[sortType][0].toUpperCase()
          let aFirstLetterIndex = wordList.indexOf(aSortTypeFirstLetter)
          let bFirstLetterIndex = wordList.indexOf(bSortTypeFirstLetter)
          return aFirstLetterIndex < bFirstLetterIndex ? -1 : (aFirstLetterIndex === bFirstLetterIndex ? 0 : 1)
        })
    }
    render()
  }
}

/**
 * 添加
 * 从原数据中随机抽取一个插入
 * @author chaiyf
 * @date 2021-01-16 11:35
 */
function add () {
  let addMovie = requestData[Math.floor(Math.random() * 10)]
  let newRank = listData.length + 1
  let newData = { ...addMovie, rank: newRank }
  listData = [newData].concat(listData)
  render()
}

/**
 * 删除
 * @author chaiyf
 * @date 2021-01-16 15:47
 * @param {object} movie 需要删除的movie
 */
function remove (movie) {
  return function () {
    listData = listData.filter(item => item.rank !== movie.rank)
    render()
  }
}

/**
 * 生成单个movie的Vnode
 * @author chaiyf
 * @date 2021-01-16 15:07
 * @param {object} movie 单个的movie数据
 * @returns {object} 转换后的 vnode
 */
function listItemView (movie) {
  return h('div.movie', {
    key: `movie_${movie.rank}`
  }, [
    h('div.movie-rank', movie.rank),
    h('div.movie-title', movie.title),
    h('div.movie-desc', movie.desc),
    h('div.rm-btn', { on: { click: remove(movie) } }, 'x')
  ])
}

/**
 * 将页面整体生成 Vnode
 * @author chaiyf
 * @date 2021-01-16 14:28
 * @param {array} data 列表数据
 * @returns {object} 转换后的 vnode
 */
function pageVNode (data) {
  const list = data.map(listItemView)
  return h('div.container', [
    h('h1.page-title', 'Top 10 movies'),
    h('div.page-operation', [
      h('div.page-sort', [
        h('span.page-sort-title', 'Sort by:'),
        h('a.page-sort-btn', { on: { click: sortList('rank')} }, 'Rank'),
        h('a.page-sort-btn', { on: { click: sortList('title') } }, 'Title'),
        h('a.page-sort-btn', { on: { click: sortList('desc') } }, 'Description'),
      ]),
      h('a.page-add', { on: { click: add } }, 'Add')
    ]),
    h('div#list.movieList', {}, list)
  ])
}

window.addEventListener('DOMContentLoaded', () => {
  render(pageVNode(listData))
})